<template>
  <div>
    <el-dialog
      :title="$t('common.select_btn')"
      :visible.sync="Visible"
      width="1000px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <FilterBox
          :labelWidth="120"
          :filterItemList="filterItemList"
          :filterData="filterData"
          :buttonGroupArr="['search','clear']"
          @search="search"
          @clear="clear"
        >
        </FilterBox>
        <MyTable
          ref="CustomerManagement_related_select"
          :tableColumn="tableColumn"
          :tableData="tableData"
          :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
        </MyTable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {  },
  props: {
    // 接收绑定参数
    
    midHight: [Number,String],
  },
  data() {
    return {
      filterItemList:[
        // input输入框
        { label:this.$t('CustomerManagementLang.Name'),width:200, filterKey: 'keywordPrecision', filterType: 'SearchInput', placeholderStr: null },
      ],
      filterData:{
        mainMemberUid:"",
        keywordPrecision: "",
      },
      Visible: false,
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.Name'),
          prop: "name",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.code'),
          prop: "nickname",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.Telephone'),
          prop: "mobile",
          width: 120,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.email'),
          prop: "email",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.sale'),
          prop: "belong_sale",
          width: 80,
          order:"",
        },
      ],
      tableData: [],
    };
  },
  created() {
    
  },
  mounted() {},
  watch: {
  },
  methods: {
    init(data) {
      console.log(this.filterData)
      this.filterData.mainMemberUid=data
      console.log(this.filterData)
      this.Visible = true;
    },
    //获取表格数据
    getTableData(){
      this.$get('getRelatedMembers',this.filterData).then((res) => {
        this.tableData=res.data
      })
    },
    //查询
    search(){
      console.log(this.filterData)
      if(!this.filterData.keywordPrecision){
        this.$message.warning(this.$t('common.filter_criteria'));
      } else {
        this.getTableData()
      }
    },
    //清空
    clear(){
      this.filterData.keywordPrecision= "",
      this.tableData=[]
    },
    // 提交修改
    confirm() {
      if(this.tableData.length>0){
        let params = new FormData();
          params.append("uid", this.filterData.mainMemberUid);
          params.append("linkUid", this.tableData[0].uid);
        this.$postForm('bindMember',params).then((res) => {
          if(res.success){
            this.cancel()
            this.$message.success(res.msg);
            this.$emit("success");
          }
        });
      }else{
        this.$message.warning(this.$t('common.noData'));
      }
    },
    //取消修改
    cancel(){
      this.clear()
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >

</style>